<template>
    <div>
        <el-button @click="add" type="primary">增加一个聚合分类</el-button>
        <el-table border :data="values">
            <el-table-column label="名称" width="150">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.name" placeholder="输入聚合分类名称" @change="change"/>
                </template>
            </el-table-column>
            <el-table-column label="搜索分类">
                <template slot-scope="scope">
                    <project_search_category
                            placeholder="添加分类"
                            v-model="scope.row.data"
                            :default-values="types"
                            :multiple="true"
                            @change="change"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120px">
                <template slot-scope="scope">
                    <el-button type="text" @click="removeAggregation(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import Project_search_category from "./project_search_category";

    export default {
        components: {
            Project_search_category,
        },
        name: "project_categories_aggregation",
        props: {
            value: Array,
            types: Array,
        },
        data() {
            return {
                values: [],
            };
        },
        methods: {
            add() {
                this.values.push({name: '', data: []});
            },
            change() {
                this.$emit('input', this.values);
            },
            removeAggregation(aggregation) {
                this.$confirm(`删除聚合分类 ${aggregation.name} ?`, '提示').then(() => {
                    this.values.splice(this.values.indexOf(aggregation), 1);
                });
            }
        },
        watch: {
            value(val) {
                console.log('watch value', val, val.length);
                this.values = val;
            },
        },
    }
</script>

<style scoped>
</style>